<template>
  <div>
    <div class="goods">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <div class="tab" ref="tab" @click="searchLink">
          <ul class="tab_content" ref="tabcontent">
            <li class="tab_item" ref="tabitem" v-if="listParam.query" @click.stop="clearQuery">
              {{listParam.query}}
              <img src="./../../assets/common/images/close.png" alt="">
            </li>
            <li class="tab_item" ref="tabitem" v-for="(item,index) in conditionList" @click.stop="clear(item)">
              {{item.name}}
              <img src="./../../assets/common/images/close.png" alt="">
            </li>
          </ul>
        </div>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text" @click="()=>searchVisiblie=true">筛选</label>
          </button>
        </div>
      </header>
      <div class="sort">
        <span class="sortBtn" @click="()=>flag=!flag">排序</span>
        <span class="count">共计{{total}}款</span>
      </div>
      <!--<div class="dropList" v-if="flag">
                                                    <mt-radio v-model="value" :options="options">
                                                    </mt-radio>
                                                  </div>-->
      <transition-group name="fade" tag="div">
        <div class="dropList" v-if="flag" key="1">
          <mt-radio v-model="value" :options="options" @change="check">
          </mt-radio>
        </div>
      </transition-group>
      <transition-group name="fade" tag="div">
        <div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div>
      </transition-group>
      <mt-loadmore :top-method="loadTop" ref="loadmore">
        <div class="goodsList" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="show">
          <Waterfall :gutterHeight="10" :maxCol="2" :percent="[1,1]">
            <WaterfallItem v-for="(item,index) in itemList" :key="index">
              <a href="#" class="goodIndex">
                <img :src="item.goodsImg" alt="">
                <div class="info">
                  <h3 style="font-weight:700;" v-html="item.sellingPoints">{{item.sellingPoints}}</h3>
                  <p style="font-weight:700;">￥{{item.goodsMoney|formatMoney}}</p>
                  <!--<p style="color:#AEAEAE;">供应仓：5</p>-->
                  <!--<p style="color:#AEAEAE;">尺码：6k,7k,8k,9k</p>-->
                </div>
              </a>
            </WaterfallItem>
          </Waterfall>
        </div>
      </mt-loadmore>
      <mt-popup v-model="searchVisiblie" :closeOnClickModal="true" position="right" class="filter">
        <header class="mint-header filter-title is-fixed" @click="()=>searchVisiblie=false">
          <div class="mint-header-button is-left">
            <button class="mint-button mint-button--default mint-button--normal">
              <span class="mint-button-icon">
                <i class="mintui mintui-back"></i>
              </span>
            </button>
          </div>
          <h1 class="mint-header-title">筛选</h1>
          <div class="mint-header-button is-right">
            <button class="mint-button mint-button--default mint-button--normal">
              <label class="mint-button-text"></label>
            </button>
          </div>
        </header>
        <div @click="()=>brandVisiblie=true">
          <mt-cell title="品牌" is-link>
            <span style="color: #C0C0C0;" v-if="brandName == ''">全部</span>
            <span style="color: #F5A623;" v-else>{{brandName}}</span>
          </mt-cell>
        </div>
        <div @click="()=>styleVisiblie=true">
          <mt-cell title="款式" is-link>
            <span style="color: #C0C0C0;" v-if="goodsTypeName == ''">全部</span>
            <span style="color: #F5A623;" v-else>{{goodsTypeName}}</span>
          </mt-cell>
        </div>
        <div class="checkBox">
          <div class="check-title" @click="isYearClick = !isYearClick">
            <span>上市年份</span>
            <i :class="{'more-right':isYearClick,'more-bot':!isYearClick}"></i>
          </div>
          <div :class="{'choose':true,'choose-more':isYearClick}">
            <span v-for="(item,index) in resultList.yearList" :class="{'bgColor':index == yearBgc}" @click="year(item,index)">{{item.name}}</span>
          </div>
        </div>
        <div class="checkBox">
          <div class="check-title" @click="isSeasonClick = !isSeasonClick">
            <span>适穿季节</span>
            <i :class="{'more-right':isSeasonClick,'more-bot':!isSeasonClick}"></i>
          </div>
          <div :class="{'choose':true,'choose-more':isSeasonClick}">
            <span v-for="(item,index) in resultList.seasonList" :class="{'bgColor':index == seasonBgc}" @click="season(item,index)">{{item.name}}</span>
          </div>
        </div>
        <div class="checkBox">
          <div class="check-title" @click="isPeopleClick = !isPeopleClick">
            <span>适穿人群</span>
            <i :class="{'more-right':isPeopleClick,'more-bot':!isPeopleClick}"></i>
          </div>
          <div :class="{'choose':true,'choose-more':isPeopleClick}">
            <span v-for="(item,index) in resultList.crowdList" :class="{'bgColor':index == peopleBgc}" @click="people(item,index)">{{item.name}}</span>
          </div>
        </div>
        <div class="checkBox">
          <div class="check-title" @click="isSexClick = !isSexClick">
            <span>适穿性别</span>
            <i :class="{'more-right':isSexClick,'more-bot':!isSexClick}"></i>
          </div>
          <div :class="{'choose':true,'choose-more':isSexClick}">
            <span v-for="(item,index) in resultList.sexList" :class="{'bgColor':index == sexBgc}" @click="sex(item,index)">{{item.name}}</span>
          </div>
        </div>
        <div class="footBtn">
          <button class="reset" @click="reset">重置</button>
          <button class="submit" @click="submit">确定</button>
        </div>
      </mt-popup>
      <mt-popup v-model="brandVisiblie" :closeOnClickModal="true" position="right" class="brand">
        <header class="mint-header brand-title is-fixed" @click="()=>brandVisiblie=false">
          <div class="mint-header-button is-left">
            <button class="mint-button mint-button--default mint-button--normal">
              <span class="mint-button-icon">
                <i class="mintui mintui-back"></i>
              </span>
            </button>
          </div>
          <h1 class="mint-header-title">筛选</h1>
          <div class="mint-header-button is-right">
            <button class="mint-button mint-button--default mint-button--normal">
              <label class="mint-button-text"></label>
            </button>
          </div>
        </header>
        <div style="height: 93vh;overflow: scroll;">
          <div v-for="(item,index) in seriesList" :key='index'>
            <h3>{{item.seriesName}}</h3>
            <div class="brand-box" id="brand">
              <img :src="item.brandImg" alt="" v-for="(item,index) in item.mallGoodsBrandList" :key='index' @click="brandCheck(item)">
            </div>
          </div>
        </div>
      </mt-popup>
      <mt-popup v-model="styleVisiblie" :closeOnClickModal="true" position="right" class="style">
        <header class="mint-header style-title is-fixed" @click="()=>styleVisiblie=false">
          <div class="mint-header-button is-left">
            <button class="mint-button mint-button--default mint-button--normal">
              <span class="mint-button-icon">
                <i class="mintui mintui-back"></i>
              </span>
            </button>
          </div>
          <h1 class="mint-header-title">筛选</h1>
          <div class="mint-header-button is-right">
            <button class="mint-button mint-button--default mint-button--normal">
              <label class="mint-button-text"></label>
            </button>
          </div>
        </header>
        <div class="style-list" ref="styleList">
          <div v-for="(item,index) in typeList" :key='index'>
            <div class="check-title" @click="active(item,index)">
              <span>{{item.goodsTypeName}}</span>
              <i :class="{'more-right':!(index == isActive),'more-bot':(index == isActive)}"></i>
            </div>
            <unfold>
              <div class="collapse-wrap" v-if="(index == isActive)">
                <!-- @slot default -->
                <slot>
                  <p v-for="(item,index) in item.goodsTypeList" :key='index' @click="typeCheck(item)">{{item.goodsTypeName}}</p>
                </slot>
              </div>
            </unfold>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>
<script>
import {
  search,
  getTypeList,
  getBrandList
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import footertab from '@/components/footer/footer'
import unfold from '@/utils/unfold'
import BScroll from 'better-scroll'
import { Waterfall, WaterfallItem } from 'vue2-waterfall'
export default {
  data() {
    return {
      show: true,
      listParam: {
        query: this.$route.query.query,
        sbar: '',
        p: 0,
        brand: '',
        style: '',
        sex: '',
        y: '',
        s: '',
        price: '',
        num: '',
        stock: 1,
        type: 0,
        img: 1,
        series: '',
        crowd: '',
        firstStyle: ''
      },
      itemList: [],
      typeList: [],
      seriesList: [],
      resultList: {},
      conditionList: [],
      total: '',
      pages: '',
      searchVisiblie: false,
      brandVisiblie: false,
      styleVisiblie: false,
      flag: false,
      value: '',
      isYearClick: true,
      isSeasonClick: true,
      isPeopleClick: true,
      isSexClick: true,
      isActive: null,
      yearBgc: null,
      seasonBgc: null,
      peopleBgc: null,
      sexBgc: null,
      // loading: false,
      goodsTypeName: '',
      brandName: '',
      options: [
        {
          label: '新品优先',
          value: '1'
        },
        {
          label: '价格从低到高',
          value: '2'
        },
        {
          label: '价格从高到低',
          value: '3'
        },
        {
          label: '库存从高到低',
          value: '4'
        },
        {
          label: '库存从低到高',
          value: '5'
        }
      ]
    }
  },
  watch: {},
  components: {
    footertab,
    unfold,
    Waterfall,
    WaterfallItem
  },
  created() {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.tab, {
          startX: 0,
          click: true,
          scrollX: true,
          scrollY: false,
          eventPassthrough: 'vertical'
        })
      } else {
        this.scroll.refresh()
      }
    })
    getTypeList().then(res => {
      this.typeList = res.data.typeList
    })
    getBrandList().then(res => {
      this.seriesList = res.data.seriesList
    })
    var parameters = this.listParam
    var strParams = '?'
    for (var key in parameters) {
      strParams += key + '=' + parameters[key] + '&'
    }
    parameters = strParams.substr(0, strParams.length - 1)
    parameters = encodeURI(parameters)
    search(parameters).then(res => {
      this.resultList = res.data.resultList
    })
    // this.fetchData()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    loadTop() {
      // 下拉刷新
      this.$refs.loadmore.onTopLoaded()
      this.itemList = []
      this.fetchData()
    },
    loadMore() {
      // this.loading = true
      this.listParam.p++
      this.fetchData()
      // setTimeout(() => {
      //   this.loading = false
      // }, 5000)
    },
    fetchData() {
      var parameters = this.listParam
      var strParams = '?'
      for (var key in parameters) {
        strParams += key + '=' + parameters[key] + '&'
      }
      parameters = strParams.substr(0, strParams.length - 1)
      parameters = encodeURI(parameters)
      search(parameters).then(res => {
        this.itemList = this.itemList.concat(res.data.queryResult.itemList)
        this.total = res.data.queryResult.total
        this.pages = res.data.queryResult.pages
        this.conditionList = res.data.resultList.conditionList
      })
    },
    check() {
      this.$nextTick(() => {
        this.listParam.p = 0
        this.listParam.sbar = 0
        this.itemList = []
        this.listParam.type = ''
        this.listParam.price = ''
        this.listParam.num = ''
        if (this.value === '1') {
          this.listParam.type = 1
        }
        if (this.value === '2') {
          this.listParam.price = 0
        }
        if (this.value === '3') {
          this.listParam.price = 1
        }
        if (this.value === '4') {
          this.listParam.num = 0
        }
        if (this.value === '5') {
          this.listParam.num = 1
        }
        this.show = false
        window.scrollTo(0, 0)
        this.flag = false
        setTimeout(() => {
          this.show = true
        }, 50)
      })
    },
    active(item, index) {
      if (this.isActive !== index) {
        this.isActive = index
        this.$refs.styleList.scrollTo(0, 0)
      } else {
        this.isActive = null
      }
    },
    year(item, index) {
      if (this.yearBgc !== index) {
        this.yearBgc = index
        this.listParam.y = item.id
      } else {
        this.yearBgc = null
        this.listParam.y = ''
      }
    },
    season(item, index) {
      if (this.seasonBgc !== index) {
        this.seasonBgc = index
        this.listParam.s = item.id
      } else {
        this.seasonBgc = null
        this.listParam.s = ''
      }
    },
    people(item, index) {
      if (this.peopleBgc !== index) {
        this.peopleBgc = index
        this.listParam.crowd = item.id
      } else {
        this.peopleBgc = null
        this.listParam.crowd = ''
      }
    },
    sex(item, index) {
      if (this.sexBgc !== index) {
        this.sexBgc = index
        this.listParam.sex = item.id
      } else {
        this.sexBgc = null
        this.listParam.sex = ''
      }
    },
    typeCheck(item) {
      this.goodsTypeName = item.goodsTypeName
      this.listParam.style = item.id
      this.styleVisiblie = false
    },
    brandCheck(item) {
      this.brandName = item.brandName
      this.listParam.brand = item.id
      this.brandVisiblie = false
    },
    reset() {
      this.listParam.y = ''
      this.yearBgc = null
      this.listParam.s = ''
      this.seasonBgc = null
      this.listParam.style = ''
      this.goodsTypeName = ''
      this.listParam.brand = ''
      this.brandName = ''
      this.listParam.crowd = ''
      this.peopleBgc = null
      this.listParam.sex = ''
      this.sexBgc = null
    },
    submit() {
      this.listParam.query = ''
      this.listParam.sbar = 0
      this.listParam.p = 0
      this.itemList = []
      this.show = false
      window.scrollTo(0, 0)
      this.searchVisiblie = false
      setTimeout(() => {
        this.show = true
      }, 50)
    },
    clear(item) {
      this.listParam[item.id] = ''
      if (item.id === 'y') {
        this.yearBgc = null
      } else if (item.id === 's') {
        this.seasonBgc = null
      } else if (item.id === 'style') {
        this.goodsTypeName = ''
      } else if (item.id === 'brand') {
        this.brandName = ''
      } else if (item.id === 'crowd') {
        this.peopleBgc = null
      } else if (item.id === 'sex') {
        this.sexBgc = null
      }
      this.listParam.sbar = 0
      this.listParam.p = 0
      this.itemList = []
      this.show = false
      window.scrollTo(0, 0)
      this.searchVisiblie = false
      setTimeout(() => {
        this.show = true
      }, 50)
    },
    clearQuery() {
      this.listParam.query = ''
      this.$router.push({ path: 'search' })
    },
    searchLink() {
      this.$router.push({ path: 'search' })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';

.goods {
  min-height: 100vh;
  margin-top: 40px;
  .mint-header {
    background-color: #262626;
    z-index: 2;
  }

  .mint-button-text {
    color: #F5A623;
  }

  .tab {
    width: 74%;
    height: 30px;
    background-color: #626262;
    overflow: hidden;
    border: none;
    .tab_content {
      min-width: 880px;
      float: left;
      .tab_item {
        float: left;
        margin-top: 4px;
        margin-left: 5px!important;
        border-radius: 5px;
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        background-color: #A4A4A4;
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
          margin-bottom: 2px;
        }
      }
    }
  }

  .sort {
    width: 100%;
    height: 40px;
    background-color: #fff;
    padding: 0 10px;
    font-size: 14px;
    line-height: 40px;
    position: fixed;
    z-index: 2;
    border-bottom: 1px solid #F7F7F7;
    .sortBtn {
      float: left;
    }
    .count {
      float: right;
    }
  }

  .dropList {
    height: 218px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 2;
    top: 80px;
    .mint-cell-wrapper {
      font-size: 14px;
    }
  }
  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
  }
  .goodsList {
    overflow: hidden;
    padding: 2.7%;
    padding-top: 50px;
    .goodIndex {
      display: inline-block;
      background-color: #fff;
      border: 1px solid rgba(174, 174, 174, 0.3);
      color: #000;
      margin: 0 5px;
      img {
        width: 100%;
        height: auto;
      }
      .info {
        padding: 5px;
        h3 {
          margin-bottom: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          em {
            color: #f40;
          }
        }
        p {
          line-height: 20px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
      }
    }
  }
  .filter {
    width: 100%;
    min-height: 100vh;
    padding-top: 40px;
    .filter-title {
      background-color: #fff;
      color: #000;
      font-size: 16px;
      border-bottom: 1px solid #ECECEC;
    }
    .mint-cell-value {
      font-size: 14px;
    }
    .mint-cell {
      border-bottom: 1px solid #ECECEC;
    }
    .checkBox {
      .choose {
        padding: 0 10px;
        overflow: hidden;
        span {
          display: inline-block;
          width: 23%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          float: left;
          margin-right: 2.65%;
          margin-bottom: 10px;
          background-color: #EEE;
        }
        .bgColor {
          background-color: #FF6600;
          color: #FFF;
        }
        span:nth-child(4n) {
          margin-right: 0;
        }
      }
      .choose-more {
        height: 40px;
      }
      .check-title {
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: inherit;
        min-height: 48px;
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        padding-left: 10px;
        span {
          font-size: 16px;
          line-height: 48px;
        }
      }
      .more-right::after {
        border: solid 2px #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 20px;
        position: absolute;
        width: 5px;
        height: 5px;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
      }
      .more-bot::after {
        border: solid 2px #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 20px;
        position: absolute;
        width: 5px;
        height: 5px;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(135deg);
      }
    }
    .footBtn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      width: 100%;
      border-top: 1px solid #ECECEC;
      position: fixed;
      bottom: 0;
      display: flex;
      button {
        flex: 1;
        color: #000;
        font-size: 16px;
        background-color: #fff;
      }
      .submit {
        background-color: #FF5151;
        color: #fff;
      }
    }
  }
  .brand {
    width: 85%;
    min-height: 100vh;
    padding: 0 15px;
    padding-top: 40px;
    .brand-title {
      background-color: #fff;
      color: #000;
      font-size: 16px;
      border-bottom: 1px solid #ECECEC;
    }
    h3 {
      margin-top: 30px;
    }
    .brand-box {
      overflow: hidden;
      img {
        width: 80px;
        height: 80px;
        border: 1px solid #eee;
        float: left;
        margin-top: 15px;
        margin-right: 15px;
      }
      img:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .style {
    width: 85%;
    min-height: 100vh;
    padding-top: 40px;
    .style-title {
      background-color: #fff;
      color: #000;
      font-size: 16px;
      border-bottom: 1px solid #ECECEC;
    }
    .check-title {
      background-color: #fff;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: inherit;
      min-height: 48px;
      display: block;
      overflow: hidden;
      position: relative;
      text-decoration: none;
      border-bottom: 1px solid #ECECEC;
      padding-left: 15px;
      span {
        font-size: 16px;
        line-height: 48px;
        font-weight: 700;
      }
    }
    .style-list {
      height: 93vh;
      overflow: scroll;
      .collapse-wrap {
        background-color: #F7F7F7;
        p {
          font-size: 14px;
          line-height: 48px;
          padding-left: 15px;
          border-bottom: 1px solid #ECECEC;
        }
      }
    }
    .more-right::after {
      border: solid 2px #c8c8cd;
      border-bottom-width: 0;
      border-left-width: 0;
      content: " ";
      top: 50%;
      right: 20px;
      position: absolute;
      width: 10px;
      height: 10px;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(45deg);
    }
    .more-bot::after {
      border: solid 2px #c8c8cd;
      border-bottom-width: 0;
      border-left-width: 0;
      content: " ";
      top: 50%;
      right: 20px;
      position: absolute;
      width: 10px;
      height: 10px;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(135deg);
    }
  }
}
</style>
